<template>
  <Nav_bar title="分账明细" />
  <div class="ledgerDetailsBox">
    <div class="tableBox">
      <Table :isPding="true" :headList="headList" :bodyList="bodyList" />
      <Pagination
        v-if="bodyList.length"
        v-model:page="pageParam.pageNum"
        :total="total"
        @pageChange="getCashDetails()"
        class="Pagination"
      />
    </div>
  </div>
  <Tabbar />
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getCashDetailsApi } from '@/api/ivestorCash/ivestorCash'

const total = ref(0)
const headList = [
  { _title: '订单尾号', key: 'orderSn' },
  { _title: '实付金额', key: 'payMoney' },
  { _title: '分账金额', key: 'money' },
  { _title: '手续费', key: 'fee' },
  { _title: '分成比例', key: 'proportion' },
  { _title: '时间', key: 'createTime', style: 'font-size: 10px;' },
]
const bodyList = ref([])
const pageParam = ref({
  pageNum: 1,
  pageSize: 10,
})
/** 获取分账明细列表 */
const getCashDetails = async () => {
  try {
    const res = await getCashDetailsApi(pageParam.value)
    console.log(res)
    total.value = res?.data.total
    bodyList.value = res?.data.rows.map((item) => {
      return {
        id: item.id,
        orderSn: item.orderSn.slice(-3),
        payMoney: '￥' + item.payMoney,
        money: '￥' + item.money,
        fee: '￥' + item.fee,
        proportion: item.proportion + '%',
        createTime: item.createTime.split(' ')[0],
      }
    })
  } catch (error) {}
}
getCashDetails()
</script>

<style lang="scss" scoped>
.ledgerDetailsBox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15px;
  .tableBox {
    width: 347px;
    height: calc(100vh - 161px);
    background: #fff;
  }
  .Pagination {
    position: absolute;
    left: 13px;
    bottom: 8px;
  }
}
</style>
